在網頁開發中，CSS 是用來為 HTML 元素提供樣式的。我們可以用多種方式將 CSS 與 HTML 結合，來控制網頁的外觀和感覺。今天介紹三種常見的結合方式：內聯樣式、內部樣式 和 外部樣式表。
內聯樣式將 CSS 直接寫在 HTML 元素的 style 屬性中，這種方法適合快速為單一元素添加樣式，但不建議在大型項目中使用，因為它不容易重複使用，導致代碼不易維護。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline CSS Example</title>
</head>
<body>
<div style="width: 100px; height: 100px; background-color: #3498db;"></div> <!-- 內聯樣式 -->
</body>
</html>
內部樣式表將 CSS 放在 HTML 文件的 <style> 標籤中，這種方法適合單頁面應用，但不太方便在多個頁面之間共享樣式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internal CSS Example</title>
<style>
.animated-box {
width: 100px;
height: 100px;
background-color: #3498db;
}
</style>
</head>
<body>
<div class="animated-box"></div> <!-- 使用內部樣式 -->
</body>
</html>
外部樣式表將 CSS 存放在單獨的文件中，並使用 <link> 標籤引入到 HTML 中。這種方式最適合多頁面網站，因為可以讓多個 HTML 文件共享相同的樣式表，提升代碼的可維護性和可重用性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>External CSS Example</title>
<link rel="stylesheet" href="styles.css"> <!-- 引入外部樣式表 -->
</head>
<body>
<div class="animated-box"></div> <!-- 使用外部樣式表 -->
</body>
</html>
.animated-box {
width: 100px;
height: 100px;
background-color: #3498db;
}
iThome鐵人賽
看影片追技術